<!DOCTYPE html>
<html lang="zxx">

<head>
    <title>Login Tina Im</title>
    <!-- Meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- //Meta tags -->
    <link rel="stylesheet" href="login/css/style.css" type="text/css" media="all"/><!-- Style-CSS -->
    <link href="login/css/font-awesome.css" rel="stylesheet"><!-- font-awesome-icons -->
    <link rel="icon" href="https://ae04.alicdn.com/kf/H452010030e0d4d579af0fc5e90cc3282b.png" type="image/x-icon">
    <link href="layer/need/layer.css" rel="stylesheet">
    <script src="layer/layer.js"></script>
    <script src="im/js/jquery.min.js"></script>

</head>

<body>

<section class="w3l-form-36">
    <div class="form-36-mian section-gap">
        <div class="wrapper">
            <div class="form-inner-cont">
                <h3>Login Tina-IM</h3>
                <div class="signin-form">
                    <div class="form-input">
                        <span class="fa fa-user-o" aria-hidden="true"></span>
                        <input type="text" name="userName"
                               placeholder="userName" id="userName" value="Tina"
                               required/>
                    </div>
                    <div class="form-input">
                        <span class="fa fa-key" aria-hidden="true"></span>
                        <input type="password" name="password" id="password"
                               placeholder="Password" value="1003"
                               required/>
                    </div>
                    <div class="login-remember d-grid">
                        <label class="check-remaind">
                            <input type="checkbox">
                            <span class="checkmark"></span>
                            <p class="remember">Remember me</p>
                        </label>
                        <button class="btn theme-button" id="btn">Login</button>
                    </div>
                    <div class="new-signup">
                        <a href="#reload" class="signuplink">Forgot password?</a>
                    </div>
                </div>

                <p class="signup">Don’t have an account? <a href="#signup.html" class="signuplink">Sign up</a></p>
            </div>

        </div>
    </div>
</section>
<script>
    $(function () {


        $("#btn").click(function () {
            let userName = $("#userName").val();
            let password = $("#password").val();
            if (userName == null || password == null || userName == '' || password == '') {
                //信息框
                layer.open({
                    content: '<span style="color: #f46266">请输入完整的账户和密码</span>'
                    , btn: '我知道了'
                });
                return;
            }
            sign(userName, password);
        })

        function sign(userName, password) {
            $.ajax({
                type: 'POST',
                url: 'sign',
                dataType: 'json',
                data: {
                    'userName': userName,
                    'password': password
                },
                success: function (data) {
                    if (data.status == 200) {
                        window.location.href = "chat.html";
                    } else {
                        layer.open({
                            content: '<span style="color: #f46266">' + data.msg + '</span>'
                            , btn: '我知道了'
                        });
                    }
                }
            });
        }

    })
</script>
</body>

</html>